<template>
  <el-button type="primary" text @click="add">
    增加
  </el-button>
  <!-- Form增加 -->
  <el-dialog v-model="dialogFormVisible" title="抽奖项目">
    <el-form :model="form">
      <el-form-item label="排序" :label-width="formLabelWidth">
        <el-input v-model="form.orders" autocomplete="off" />
      </el-form-item>
      <el-form-item label="图片标题" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="图片商品ID" :label-width="formLabelWidth">
        <el-input v-model="form.prid" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-radio v-model="form.statics" label="1" size="large">上线</el-radio>
        <el-radio v-model="form.statics" label="0" size="large">下线</el-radio>
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload class="avatar-uploader" :action="`${api}/index.php/index/goods/uploadfile`" :data="jm()"
          :show-file-list="false" :on-success="(file) => { editImgsProps ({file, key: 'img' }) }">
          <img v-if="form.img" :src="ifImgHeader(form.img)" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="postData">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>


  <el-table :data="tableData" style="width: 100%">
    <el-table-column  prop="orders" label="排序" width="100" align="center" />
    <el-table-column  prop="title" label="图片标题" width="220" align="left" />
    <el-table-column  prop="prid" label="图片商品ID" width="120" align="center" />
    <el-table-column  prop="statics" label="状态" width="220" align="center" >
      <template #default="scope">
         <span v-if="scope.row.statics==1">上线</span>
         <span v-if="scope.row.statics==0">下线</span>
      </template>
    </el-table-column>
    <el-table-column prop="img" label="图片" width="200" align="center">
      <template #default="scope">
        <img style="width: 100px; height: 100px" :src="HttpImg + scope.row.img">
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" align="center">
      <template #default="scope">
        <el-button link type="primary" @click="eid(scope.row.id)">修改</el-button>
        <el-button link type="primary" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import UploadFile from 'element-plus'
import {
	ElMessageBox,
	ElMessage
} from "element-plus";
export default {
  components: {
    [UploadFile.name]: UploadFile
  },
  data() {
    return {
      HttpImg: "http://gyycadmincss.hansn.cn",
      tableData: [],
      form: {
        type: "1",
        statics:"1"
      },
      form1: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      formLabelWidth: '120px',
      imageUrl: "",
      options: [{
        value: '0',
        label: '常规周边'
      }, {
        value: '1',
        label: '节日限定'
      }, {
        value: '2',
        label: '趣味潮玩'
      }, {
        value: '3',
        label: '时尚服装'
      }, {
        value: '4',
        label: '食品饮品'
      }],
      value: '',
      id: ''
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    add() {
      this.form.title="";
      this.form.orders="";
      this.form.img="";
      this.form.prid="";
      this.form.statics="1";
      this.dialogFormVisible = true;
      this.id = ""
    },
    del(id) {
      this.$http.post("/index.php/index/goods/imglbdel", {
        id: id
      }).then(res => {
        if (res.code == 200) {
          ElMessage({
						message: "删除成功",
						type: "success",
					});
          this.getData()
        }
      })
    },
    eid(id) {
      this.dialogFormVisible = true;
      this.id = id;
      this.$http.post("/index.php/index/goods/imglbxq", {
        id: id
      }).then(res => {
        if (res.code == 200) {
          this.form = res.data[0];
          this.form.statics=res.data[0].statics.toString()
        }
      })
    },

    getData() {
      this.tableData = []
      this.$http.post("/index.php/index/goods/imglblist").then(res => {
        console.log(res)
        this.tableData = res.data

      })
    },
    postData() {
     let data = {
        title: this.form.title,
        orders: this.form.orders,
        img: this.form.img,
        prid:this.form.prid,
        statics:this.form.statics,
        id: this.id
      }
      
      this.$http.post(this.id ? "/index.php/index/goods/imglbedit" : "/index.php/index/goods/imglbadd", data).then(res => {
        if (res.code == 200) {
          this.dialogFormVisible = false;
          this.id = ""
          this.getData()
        }
      })
    },
    getTimeFormat(zcTime) {
      let time = (new Date(zcTime).getTime()) / 1000; //除1000 是变成秒级的时间戳 不除就是毫秒级
      return time;
    },
    disabledDateFun(time) {
      if (time.getTime() < new Date().getTime()) {
        return time.getTime() <= new Date().getTime() - 1 * 8.64e7; //时间范围必须是时间戳
      }
    },
    formatEmployment(type) {
      // 根据源数据经过处理 把处理之后的数据返回
      // 定义一个映射结构
      const map = {
        0: '未发布',
        1: '活动中',
        2: '已结束',
      }
      return map[type]
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;

}
</style>
